@page "/Wizard"

@using FluentUI.Demo.Shared.Pages.Wizard.Examples

<h1>Wizard</h1>

<p>
    <b>Wizards</b> are a step-by-step user interface used to break down complex tasks into digestible pieces.
    The simplified layout allows the reader to more easily understand the scope of a given task and the actions 
    needed to complete the task.
</p>

<p>
    By default, steps are displayed on the left, but you can move them to the top of the component.
    They are in the form of circular bubbles, with a check mark indicating whether it has been processed or not.
    They are not numbered, but the <b>DisplayStepNumber</b> property can be used to add this numbering.
    It's also possible to customize these bubbles via the <b>IconPrevious</b>, <b>IconCurrent</b> 
    and <b>IconNext</b> properties.
</p>

<p>
    The order of the steps must be defined when designing the Wizard.
    However, it is possible to enable or disable a step via the <b>Disabled</b> property. 
</p>

<p>
    By default, the contents of all steps are hidden and displayed when the user arrives at that
    that step (for display performance reasons). But the <b>DeferredLoading</b> property
    property reverses this process and generates the contents of the active step only.
</p>
<p>
    The <b>Label</b> and <b>Summary</b> properties display the name and a small summary of the step below or next to the bubble.
    The <b>StepTitleHiddenWhen</b> property is used to hide this title and summary when the screen width
    is reduced, for example on mobile devices. By default, the value <code>XsAndDown</code> is applied
    to hide this data on cell phones (&lt; 600px).
</p>

<p>
    All these areas (bubbles on the left/top and navigation buttons at the bottom) are fully customizable
    using the <b>StepTemplate</b> and <b>ButtonTemplate</b> properties (see the second example).
    You can customize button labels using the <b>ButtonTemplate</b> or by modifying
    the static properties <b>FluentWizard.LabelButtonPrevious / LabelButtonNext / LabelButtonDone</b>.
</p>

<blockquote>
    <b>note</b>: this FluentWizard is not yet fully compatible with accessibility.
</blockquote>

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="@typeof(WizardDefault)"/>

<DemoSection Title="Customized" Component="@typeof(WizardCustomized)" />

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentWizard)" />

<ApiDocumentation Component="typeof(FluentWizardStep)" />
